<template>
  <view class="home">
    <swiper class="swiper" indicator-dots circular>
      <swiper-item v-for="item in bannerList" :key="item">
        <image :src="item"></image>
      </swiper-item>
    </swiper>
    <!-- 推荐商品 -->
    <view class="hot_goods">
      <view class="tit">推荐商品</view>
      <goods-list @goods-click="toGoodsDetail" :goods="goodsList"></goods-list>
      <view class="isOver" v-if="isEnd">-----我是有底线的-----</view>
    </view>
  </view>
</template>

<script setup>
import {ref} from 'vue'
import {onLoad, onPullDownRefresh, onReachBottom} from "@dcloudio/uni-app";
import {reqBannerList, reqGoodsList} from "@/api";
import GoodsList from '@/components/goods-list.vue'

const bannerList = ref([])
const goodsList = ref([])
const goodsParam = {
  pageNum: 1,
  pageSize: 12,
}
let isLoading = false, isEnd = ref(false)

async function getBannerList() {
  const res = await reqBannerList()
  bannerList.value = res.data
}

async function getGoodsList(callback) {
  isLoading = true
  const res = await reqGoodsList(goodsParam)
  if (!res.data || res.data.length < 12) {
    isEnd.value = true
  }
  if (res.data) {
    goodsList.value = [...goodsList.value, ...res.data.records]
  }
  isLoading = false
  callback && callback()
}

function toGoodsDetail(goodsId) {
  uni.navigateTo({url: "/pages/goods/detail?id=" + goodsId})
}

onPullDownRefresh(() => {
  goodsParam.pageNum = 1
  goodsList.value = []
  getGoodsList(() => uni.stopPullDownRefresh())
})
onReachBottom(() => {
  if (isLoading) {
    return
  }
  if (isEnd.value) {
    return uni.showToast({
      title: '到底了！',
    })
  }
  goodsParam.pageNum += 1
  getGoodsList()
})
onLoad((option) => {
  getBannerList()
  getGoodsList()
})
</script>

<style lang="scss">
.home {
  .swiper {
    width: 750rpx;
    height: 380rpx;

    image {
      height: 100%;
      width: 100%;
    }
  }

  .nav {
    display: flex;

    .nav_item {
      width: 25%;
      text-align: center;

      view {
        width: 120rpx;
        height: 120rpx;
        background: $shop-color;
        border-radius: 60rpx;
        margin: 10px auto;
        line-height: 120rpx;
        color: #fff;
        font-size: 50rpx;
      }

      .icon-tupian {
        font-size: 45rpx;
      }

      text {
        font-size: 30rpx;
      }
    }
  }

  .hot_goods {
    background: #eee;
    overflow: hidden;

    .tit {
      height: 40px;
      line-height: 40px;
      color: $shop-color;
      text-align: center;
      letter-spacing: 20px;
      //background: #fff;
      margin: 10rpx 0 0 0;
      border-radius: 20rpx;
    }

    .isOver {
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 28rpx;
    }
  }
}
</style>
